<template>
  <div>
    <div class="app-title">APP-demo</div>

    <div class="app-container">
      <div class="component-box">
        <draggable
          class="draggable-container"
          v-model="myArray"
          animation="300"
          :options="{
            group: { name: 'plugin', pull: 'clone', put: false },
            sort: false,
          }"
          :clone="handleClone"
        >
          <transition-group>
            <div class="list-box" v-for="element in myArray" :key="element.id">
              {{ element.name }}
            </div>
          </transition-group>
        </draggable>
      </div>
      <div class="preview-box">
        <!-- <draggable
          class="draggable-list2"
          v-model="list2"
          group="plugin"
          animation="300"
          @input="handleInput"
        >
          <transition-group :style="{ minHeight: '120px', display: 'block' }">
            <div
              class="list-group-item"
              v-for="element in list2"
              :key="element.name"
            >
              {{ element.name }}
            </div>
          </transition-group>
        </draggable> -->
        <test-draggable></test-draggable>
      </div>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import TestDraggable from "./testComponents";
export default {
  name: "test",
  components: {
    draggable,
    TestDraggable,
  },
  data() {
    return {
      myArray: [
        {
          name: "John",
          id: 1,
        },
        {
          name: "Joao",
          id: 2,
        },
        {
          name: "Jean",
          id: 3,
        },
        {
          name: "Gerard",
          id: 4,
        },
      ],
      list2: [
        // {
        //   name: "John",
        //   id: 1,
        // },
        // {
        //   name: "Joao",
        //   id: 2,
        // },
      ],
    };
  },
  methods: {
    handleClone({ name, id }) {
      return {
        name,
        id,
        test: "hahahah",
      };
    },
    handleInput(val) {
      console.log("===", val);
    },
  },
};
</script>
<style lang="less" scoped>
.app-title {
  padding: 20px;
  text-align: center;
  font-size: 28px;
}
.app-container {
  display: flex;
  .component-box {
    width: 200px;
    // border-right: 1px solid #efefef;
    padding: 20px;
    .list-box {
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #efefef;
      text-align: center;
      cursor: pointer;
    }
  }
  .preview-box {
    width: 500px;
    background: #f9f9f9;
    .draggable-list2 {
      width: 100%;
      height: 500px;
      .list-group-item {
        background: #fff;
        padding: 10px;
        border: 1px solid #efefef;
        border-bottom: none;
        text-align: center;
        cursor: pointer;
      }
      .list-group-item:last-child {
        border-bottom: 1px solid #efefef;
      }
    }
  }
}
</style>
